Ext.onReady( function(){
	var controls; 
	var hotzone;
	var item1 = Ext.get('item1');
	
	// drop zones
    var dropzone = new Ext.dd.DropZone('hotzone', {ddGroup:'group'});
	
    item1.dd = new Ext.dd.DDProxy('item1', 'group', {       
         scope:this,
         fn:function(dd, data) {         
    		   Ext.MessageBox.alert('Alert', dd.getX() + ", " + dd.getY());
    		   // to do
    		   // ...
    		   // ..
         }
    });    
	
	if(!controls) {
		controls = new Ext.Panel({
			renderTo 	: 'controls',
			title		: 'Controls',
			width       : 200,
	        height      : 100,
			collapsible : true,
			draggable 	: true,
			items		: item1			
		});
	}
	
	if(!hotzone) {
		hotzone = new Ext.Panel({
			renderTo 	: 'hotzone',
			width       : 60,
	        height      : 60
		});
	}
});


